<div class="field-wrapper">
    <div class="box-shadow" #bidOpeningRef>
        <div class="top-bar">
            <span>{{componentData.labelText?componentData.labelText:'开标演示'}}</span>
            <div class="spacer"></div>
            <a nz-button nzType="link" (click)="toggleFullScreen()">
                <i class="iconfont icon-fullscreen-line"></i>
            </a>
        </div>
        <div class="content" [ngStyle]="{'backgroundImage': 'url('+ curBgImgUrl+')' }">
            <div class="top-panel">
                <div class="main-title" *ngFor="let item of dm.titles; let index = index"
                    [ngStyle]="{'fontSize': item.fontSize+'px', 'color':item.color}"
                    (dblclick)="editMode('tagTitle'+index)">
                    <span
                        *ngIf="!editModeStatus['tagTitle'+index]">{{dataModel[item.bindField]?dataModel[item.bindField]:item.defaultTxt}}</span>
                    <input *ngIf="editModeStatus['tagTitle'+index]" class="no-border" nz-input nzBorderless
                        [(ngModel)]="dataModel[item.bindField]" (blur)="cancelEdit('tagTitle'+index)" />
                </div>
            </div>
            <div class="time-panel">
                <div class="time-item" *ngFor="let item of dm.timeContents"
                    [ngStyle]="{'backgroundColor': item.backgroundColor + '40','fontSize': item.fontSize+'px', 'color':item.color}">
                    <span class="m-l">
                        <i class="iconfont icon-time-line"></i>
                        {{item.title?item.title:"开标时间"}}
                    </span>
                    <span *ngIf="item.timeType != 'innerTime'">
                        {{dataModel[item.bindField]?.ts | date:'yyyy年MM月dd日'}}
                    </span>
                    <span *ngIf="item.timeType == 'innerTime'">
                        {{ beijingTime | date:'yyyy年MM月dd日' }}
                    </span>
                    <div class="sp-time" [ngStyle]="{'backgroundColor': item.backgroundColor}">
                        <span *ngIf="item.timeType != 'innerTime'">{{dataModel[item.bindField]?.ts |
                            date:'HH:mm:ss'}}</span>
                        <span *ngIf="item.timeType == 'innerTime'">{{beijingTime | date:'HH:mm:ss'}}</span>
                    </div>
                </div>
            </div>
            <div class="buttom-panel">
                <div *ngFor="let item of dm.buttomTitles; let index = index"
                    [ngStyle]="{'fontSize': item.fontSize+'px', 'color':item.color}"
                    (dblclick)="editMode('buttomTitles'+index)">
                    <span
                        *ngIf="!editModeStatus['buttomTitles'+index]">{{dataModel[item.bindField]?dataModel[item.bindField]:item.defaultTxt}}</span>
                    <input *ngIf="editModeStatus['buttomTitles'+index]" class="no-border" nz-input nzBorderless
                        [(ngModel)]="dataModel[item.bindField]" (blur)="cancelEdit('buttomTitles'+index)" />
                </div>
            </div>

            <div class="edit-img-btn">
                <button [zeprideAuthority]="zeprideAuthorityData" [disabled]="!editable" nz-button nzType="default"
                    (click)="moreBackgroundImgs()">
                    <i class="iconfont icon-camera-line"></i>
                    编辑背景图片</button>
            </div>
        </div>


    </div>

</div>